<template>
    <!-- 所有的内容要被根节点包含起来,此处div就是根节点 -->
    <div id="home">
        <h3>{{msg}}</h3>
        <button @click="run()">点我</button>
        <v-header></v-header>

        <v-lifecycle v-if="flag"></v-lifecycle>

        <button @click="flag=!flag">挂载及卸载life组件</button>
    </div>
</template>

<script> 
import Header from './Header.vue';
import LifeCycle from './LifeCycle.vue';

export default {
    data(){
        return {
            msg:'我是一个首页组件',
            flag:true
        }
    },
    methods:{
        run(){
            alert(this.msg);
        }
    },
    components:{
        'v-header':Header,
        'v-lifecycle':LifeCycle
    }
}
</script>

<style lang="scss" scoped>
// 1 不加限制的话对所有h3标签有效
// h3{
//     color:red
// }
// 2 加上#home限制只对本组件有效
// #home{
    h3{
     color:red
    }
// }
// 3 或者不加上#home限制,直接在style上加上scoped属性,表示局部作用域
</style>

